<template>
	<view class="page">
		<view class="padding-top text-center">
			第<text class="text-bold text-xl">{{index+1}}</text>题
			共<text class="text-bold text-xl">{{questionList.length}}</text>题
		</view>
		<view class='page__hd padding'>
			<view class="page__title">
				<text class="text-bold">【单选题】</text>
				{{questionList[index].question}}
			</view>
		</view>
		<view class="page__bd">
			<radio-group class="radio-group" @change="radioChange">
				<label class="radio my-choosebox" v-for="(value,index) in questionList[index].option">
					<radio :value="value.key" :checked="questionList[index].checked" />
					<text class="margin-left-xs">{{value.value}}</text>
				</label>
			</radio-group>
		</view>
		<view class='page_ft flex padding flex-direction'>
			<button @click='nextSubmit' class="cu-btn bg-red round lg" v-if="index == questionList.length-1">提交</button>
			<button @click='nextSubmit' class="cu-btn bg-red round lg" v-else>下一题</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				questionList: [],
				index: 0,
				chooseValue: [],
				totalScore: 0,
				wrong: 0,
				wrongList: [],
				wrongListSort: [],
			}
		},
		onLoad() {
			// 获取题库-函数执行
			this.getQuestionList();
		},
		methods: {
			// 获取题库-函数定义
			getQuestionList() {
				// 显示 loading 提示框
				uni.showLoading({
					title: "拼命加载中",
				});
				uni.request({
					url: "https://www.fastmock.site/mock/7f82ecc74d8315e7f4d55723ddcf23d5/question/listall",
					method: "get",
					success: ({
						data = []
					}) => {
						console.log("[云数据库] [activityQuestion] 查询成功");
						let list = data.data.list;
						// 将数据从逻辑层发送到视图层，通俗的说，也就是更新数据到页面展示
						this.questionList = list
						this.index = 0
						// 隐藏 loading 提示框
						uni.hideLoading();
					},
				});
			},
			radioChange(e) {
				this.chooseValue[this.index] = e.detail.value;
			},
			// 下一题/提交 按钮
			nextSubmit() {
				// 如果没有选择
				if (
					this.chooseValue[this.index] == undefined ||
					this.chooseValue[this.index].length == 0
				) {
					return uni.showToast({
						title: "请选择答案!",
						icon: "none",
						duration: 2000,
					});
				}

				// 判断所选择的选项是否为正确答案
				this.chooseJudge();

				// 判断是不是最后一题
				this.lastJudge();
			},
			// 判断所选择的选项是否为正确答案
			chooseJudge() {
				var trueValue = this.questionList[this.index]["true"];
				var chooseVal = this.chooseValue[this.index];
				if (chooseVal.toString() != trueValue.toString()) {
					// 答错则记录错题
					this.wrong++;
					this.wrongListSort.push(this.index);
					this.wrongList.push(this.questionList[this.index]._id);
				} else {
					this.totalScore = this.totalScore + 5
				}
			},
			// 判断是不是最后一题
			lastJudge() {
				if (this.index < this.questionList.length - 1) {
					// 如果不是最后一题，则切换下一题
					let index = this.index + 1;
					this.index = index;
				} else {
					// 如果是最后一题，则提交答卷
					this.addExamRecord();
				}
			},
			// 提交答卷
			addExamRecord() {
				uni.showLoading({
					title: "提交答卷中",
				});
				uni.navigateTo({
					url: `../results/results?wrong=${this.wrong}&questionNum=${this.questionList.length}`
				})
				wx.hideLoading();
			},
		}
	}
</script>

<style>
	/* pages/test/test.wxss */
	page {
		background-color: #fff;
	}

	.page {
		padding: 20rpx;
	}

	.page__bd {
		padding: 20rpx;
	}

	.my-choosebox {
		display: block;
		margin-bottom: 20rpx;
	}

	.toindex-btn {
		margin-top: 20rpx;
		display: inline-block;
		line-height: 2.3;
		font-size: 13px;
		padding: 0 1.34em;
		color: red;
		float: right;
	}

	.page .radio-group,
	.page .checkbox-group {
		display: block;
	}
</style>